import Link from 'next/link';
import { DeleteMirror } from '@/components/mirrors/deleteMirror';
import { FolderIcon, DocumentIcon } from '@heroicons/react/16/solid';
import { FileItem } from '@/registry/types';
import { formatBytes } from '@/registry/utils';
import { auth } from '@/auth';
import { fetchMirrors } from '@/lib/data';
import { UploadMirror } from '@/components/mirrors/uploadMirror';

// export const revalidate = 0;
// export const dynamic = 'force-dynamic';

export default async function Page({ params }: { params: { slug?: string[] } }) {
    const slug = params.slug || [];
    const files: FileItem[] = await fetchMirrors(slug);
    const session = await auth();
    return (
        <main className='overflow-auto'>
            <div>{session?.user?.id && <UploadMirror slug={slug} />}</div>
            <table className='caption-bottom md:table w-full'>
                <thead className='text-left text-sm font-normal [&_tr]:border-b'>
                    <tr className='border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted'>
                        <th className='px-3 py-5 font-medium'>文件名称</th>
                        <th className='px-3 py-5 font-medium'>文件大小</th>
                        <th className='px-3 py-5 font-medium'>最近更新</th>
                        <th className='px-3 py-5 font-medium'>创建时间</th>
                        <th className='px-3 py-5 font-medium'>操作</th>
                    </tr>
                </thead>
                <tbody className='[&_tr:last-child]:border-0'>
                    {slug.length ? (
                        <tr className='border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted'>
                            <td className='whitespace-nowrap px-3 py-3'>
                                <Link href={`/mirrors/${slug.slice(0, -1).join('/')}`}>../</Link>
                            </td>
                        </tr>
                    ) : null}
                    {files?.map((file: FileItem) => {
                        return (
                            <tr
                                key={file.filepath}
                                className='border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted'
                            >
                                <td className='whitespace-nowrap px-3 py-3'>
                                    {file.type === 'dir' ? (
                                        <Link
                                            href={slug.length ? `/mirrors/${slug.join('/')}/${file.filename}` : `/mirrors/${file.filename}`}
                                            className='flex items-center gap-1 text-blue-500 underline  flex-1'
                                        >
                                            <FolderIcon className='w-4 h-4' />
                                            {file.filename}
                                        </Link>
                                    ) : (
                                        <a
                                            target='_blank'
                                            href={slug.length ? `/api/download/${slug.join('/')}/${file.filename}` : `/api/download/${file.filename}`}
                                            className='flex items-center gap-1 text-blue-500 underline  flex-1'
                                        >
                                            <DocumentIcon className='w-4 h-4' />
                                            {file.filename}
                                        </a>
                                    )}
                                </td>
                                <td className='whitespace-nowrap px-3 py-3'>{file.type === 'dir' ? '-' : formatBytes(file.size)}</td>
                                <td className='whitespace-nowrap px-3 py-3'>{file.mtime}</td>
                                <td className='whitespace-nowrap px-3 py-3'>{file.birthtime}</td>
                                <td className='whitespace-nowrap px-3 py-3'>{file.type === 'file' && session?.user?.id ? <DeleteMirror filepath={`${slug.join('/')}/${file.filename}`} /> : '-'}</td>
                            </tr>
                        );
                    })}
                </tbody>
            </table>
        </main>
    );
}
